<template>
	<div class="mask-model" v-if="show" @tap.stop="close">
		<image class="mask-image" src="@/static/img/liyangbeijing.png" mode="aspectFill" style="z-index: -1;"></image>
		<div class="mask-box">
			<div class="mask-info">
				<span class="jiu-font32-fff" style="font-size: 6.4vw;">扭蛋结果</span>
				<span class="jiu-font24-555" style="color: #FFCE80;">获得一张优惠券</span>
				<div class="info-box">
					<div class="left"></div>
					<div class="right"></div>
					<div>
						<span class="info-border">豪哥真的帅专用券</span>
					</div>
					<span class="info-money">
						<label style="font-size: 3.73vw;">￥</label>100.00
					</span>
					<span class="info-condition">满2000可用</span>
					<span class="info-time">有效期: 2020/09/07～2020/12/05</span>
				</div>
				<div class="line-box">
					<span class="dashed"></span>
				</div>
				<span class="info-look">立即查看</span>
				<span class="info-cancel" @tap="close">继续扭蛋</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				show: false,
			}
		},
		methods:{
			open(obj) {
				console.log('222222222222223',obj)
				this.show = true;
			},
			close(){
				this.show = false;
			}
		}
	}
</script>

<style lang="scss">
	.mask-image {
		will-change: transform;
		position: fixed;
		top: 0;
		left: -50%;
		height: 100%;
		width: 200%;
		z-index: 1000;
		background: transparent;
		animation: box-ani 40s infinite linear;
	}

	@keyframes box-ani {
		from {
			transform: rotate(0)
		}

		to {
			transform: rotate(360deg)
		}
	}

	.mask-model {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 1111;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.mask-box {
			display: flex;
			align-items: center;
			height: 100%;
			width: 100%;
			padding: 0 8.53vw;

			.mask-info {
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #1b1b1b;
				padding: 10.67vw 6.4vw 6.67vw 6.4vw;
				border-radius: 6.4vw;
				width: 100%;

				.info-box {
					margin-top: 6.4vw;
					margin-bottom: 6.4vw;
					padding: 4.27vw 0 4vw 6.4vw;
					background-color: #272727;
					border-radius: 4.27vw;
					display: flex;
					flex-direction: column;
					position: relative;
					width: 100%;
					
					.left{
						width: 4.27vw;
						height: 4.27vw;
						border-radius: 50%;
						background-color: #1b1b1b;
						position: absolute;
						left: -2.13vw;
						top: 14.4vw;
					}
					.right{
						width: 4.27vw;
						height: 4.27vw;
						border-radius: 50%;
						background-color: #1b1b1b;
						position: absolute;
						right: -2.13vw;
						top: 14.4vw;
					}

					.info-border {
						flex-shrink: 0;
						border-radius: 1.07vw;
						border: 1px solid #A972FF;
						padding: 0 1.07vw;
						line-height: 4.8vw;
						font-size: 2.67vw;
						font-weight: 300;
						color: #A972FF;
					}
				
					.info-money{
						margin-top: 2.13vw;
						font-size: 6.4vw;
						font-weight: 500;
						color: #fff;
					}
					.info-condition{
						font-size: 3.2vw;
						font-weight: 300;
						color: #A972FF;
					}
					.info-time{
						font-size: 3.2vw;
						font-weight: 300;
						color: #555555;
					}
				}
			}
		}
		.line-box {
			padding-top: 4.27vw;
			width: 100%;
			// overflow: hidden;
			position: relative;
			display: flex;
		
		// 	&:after {
		// 		content: '';
		// 		height: 4.27vw;
		// 		width: 4.27vw;
		// 		border-radius: 50%;
		// 		position: absolute;
		// 		left: -6.13;
		// 		top: 88%;
		// 		transform: translate(-50%, -50%);
		// 		background-color: #000;
		// 	}
		
		// 	&:before {
		// 		content: '';
		// 		height: 4.27vw;
		// 		width: 4.27vw;
		// 		border-radius: 50%;
		// 		position: absolute;
		// 		right: -6.13vw;
		// 		top: 88%;
		// 		transform: translate(50%, -50%);
		// 		background-color: #000;
		// 	}
		
			.dashed {
				background: linear-gradient(to left,
						transparent 0%,
						transparent 50%,
						#000 50%,
						#000 100%);
				background-size: 16px 1px;
				background-repeat: repeat-x;
				width: 100%;
				height: 1px;
			}
		}
	
		.info-look{
			margin-top: 6.4vw;
			width: 100%;
			line-height: 12.8vw;
			background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
			color: #000;
			font-size: 3.73vw;
			font-weight: 500;
			text-align: center;
			border-radius: 5.33vw;
		}
		
		.info-cancel{
			margin-top: 3.2vw;
			font-size: 3.2vw;
			font-weight: 300;
			color: #555555;
		}
	}
</style>
